<template>
    <view class="wallet-wrapper">

        <view class="price-box">
            <view class="price"> <text class="unit">￥</text>{{walletInfo.balance}}</view>
            <view class="tips">总金额</view>
        </view>

        <view class="card-box">

            <view class="card-title">收益明细</view>
            <view class="card-body">
                <view class="item default">
                    <view class="n">类型</view>
                    <view class="n p">金额</view>
                    <view class="n" style="width: 160rpx;">日期</view>
                </view>
            <scroll-view scroll-y="true" class="scroll-Y ">
                  <view class="item d " v-for=" item in walletInfo.recordList" :v-key="item.id">
                    <view class="n">消费</view>
                    <view class="n price">{{item.money}}</view>
                    <view class="n">{{ parseTime(item.createdOn,"{y}-{m}-{d}")}}</view>
                  </view>
              </scroll-view>
			 <!-- <scroll-view scroll-y="true" class="scroll-Y ">
			     <view class="item d " >
			       <view class="n">消费</view>
			       <view class="n p price">400</view>
			       <view class="n">2023.5.20</view>
			     </view> <view class="item d " >
			        <view class="n">消费</view>
			        <view class="n p price">400</view>
			        <view class="n">2023.5.20</view>
			      </view> <view class="item d " >
			        <view class="n">消费</view>
			        <view class="n p price">400</view>
			        <view class="n">2023.5.20</view>
			      </view> <view class="item d " >
			        <view class="n">消费</view>
			        <view class="n p price">400</view>
			        <view class="n">2023.5.20</view>
			      </view> <view class="item d " >
			        <view class="n">消费</view>
			        <view class="n p price">400</view>
			        <view class="n">2023.5.20</view>
			      </view>
			  </scroll-view> -->

            </view>
        </view>
      <view class="btn" style="margin-top: 50rpx;margin-left: 10rpx;margin-right: 10rpx;">
        <Button @click="toBase()">立即提现</Button>
        <button  :disabled="true" v-if="walletInfo.authentication && walletInfo.authentication ===1"  class="rz">已经认证</button>
        <button  v-if="!walletInfo.authentication  || walletInfo.authentication ===0"  @click="toAuthentic()" class="rz">实名认证</button>

      </view>

        <view class="index_push" @click="toPush">
            <img style="width: 150rpx;height: 150rpx;" src="@/assets/images/push-btn.png" alt="">
        </view>

    </view>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import Button from '@/components/Button.vue'
import api from '@/apis/api';
import { showLoading, showToast } from '@/utils/prompt';

const walletInfo = reactive({
  balance: 0,
  recordList: [],
  authentication:0
})
function getWalletInfo() {
  return api.myWallet().then(({ data }) => {
    console.log(data,"data====")
    walletInfo.balance = data.balance
    walletInfo.authentication= data.authentication
    walletInfo.recordList=data.recordList
    console.log(walletInfo.recordList ,"walletInfo.recordList")
  })
}

function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}
function toPush() {
    uni.reLaunch({
        url: '/pages/push/push'
    })
}

onMounted(() => {
  getWalletInfo()
})

function toBase(){
    if(!walletInfo.authentication || walletInfo.authentication===0){
      return showToast("您还未完成认证，请先完成个人认证！")
    }
    uni.navigateTo({
        url:'/pages/user/cash/base'
    })
}
function toAuthentic(){
  uni.navigateTo({
    url:'/pages/user/cash/authentic'
  })
}

onUnmounted(() => {

})

</script>

<style lang="scss" scoped>
page{
    background: #f9f9f9;
}
.wallet-wrapper{
    padding: 0 30rpx;
    padding-top: 40rpx;
    font-family: 思源黑体;
    .btn{
        .rz{
            border-radius: 148rpx;
            border: 1px solid #FD6564;
            color: #000;
            font-size: 32rpx;
            margin-top: 40rpx;
			background-color: #fff;
        }
    }
    .scroll-Y{
        height: 700rpx;
    }
    .price-box{
      left: 0px;
      top: 0px;
      width: 690rpx;
      opacity: 1;
        height: 300rpx;
        // background: #ff5d58;
		background: url('../../../assets/images/sys_qianbao_card.png') no-repeat;
		background-size: 100% 100%;
        border-radius: 32rpx;
        // box-shadow: 0px 12rpx 12rpx 24rpx rgba(254, 112, 12, 0.07);
		box-shadow: 0rpx 6rpx 6rpx 12rpx rgba(254, 112, 12, 0.07);
        font-family: PingFang SC Bold;
        display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
        .price{
            font-size: 60rpx;
            color: #fff;
			font-weight: 800;
            .unit{
                font-size: 46rpx;
				font-weight: 400;
            }
        }
        .tips{
            font-size: 30rpx;
            color: #FFECEC;
        }
    }

    .card-box{
        background: #fff;
        border-radius: 30rpx;
        height: 900rpx;
        // padding: 0 30rpx;
        // padding-top: 48rpx;
        margin-top: 40rpx;
        .card-title{
            color: #333333;
            font-size: 28rpx;
            height: 88rpx;
            line-height: 88rpx;
            padding-left: 30rpx;
            border-bottom: 2rpx solid #F3F3F3;
        }

        .card-body{
            padding: 0 40rpx;
            height: 80rpx;
            padding-top: 30rpx;
            .item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .n{
                    color: #060606;
                    flex: 1;
					text-align: center;
                    &:last-child{
                        flex:1.5;
                        text-align: right;
                    }
                    &:first-child{
                        flex:1.5;
                        text-align: left;
                    }
                }
                .n.price{
                    color: #FF0000;
					font-weight: 800;
                }

            }
            .item.d{
                height: 100rpx;
                line-height: 100rpx;
            }
            .item.default{
                margin-bottom: 40rpx;
                .n{
                    color: #B9B2B2;

                }
            }
        }

    }
}

.wallet_title{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 375px;
  height: 80px;
  opacity: 1;

}


.index_push {
    position: fixed;
    right: 30rpx;
    top: 70%;
}
</style>
